<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.ta{color: red;}
	.container{
	           width:500px;
	           border: 1px red solid;
	           margin: 30px auto;}
	.container nav{
		height:50px;
		display: flex;
		

	}
	 a{
	 	display:block;
	 	flex:1;
	    text-align: center;
	    text-decoration: none;
	    line-height: 50px;
	    color:#333;

	    }

	 .content div{
	 	height: 400px;
	 	text-align: center;
	 	line-height: 400px;
	 	display: none;
	 	font-size: 25px;
	 	color:#333;

	 }
	 .content .box1{/*2个中间有空格*/
	 			display:block;
	            }
	 .active{background:#333;
	         color: #fff;}
	</style>
	
	
	
</head>
<body>
	<h1 align="center" class="ta">table选项卡</h1>
	<div class="container">
		<nav>
			<a href="#" class="active">周一</a>
			<a href="#">周二</a>
			<a href="#">周三</a>
			<a href="#">周四</a>
			<a href="#">周五</a>
		</nav>
		<div class="content">
			<div class="box1">内容1</div>
			<div class="">内容2</div>
			<div class="">内容3</div>
			<div class="">内容4</div>
			<div class="">内容5</div>
		</div>
		
	</div>
</body>
	<script>
		var btn=document.getElementsByTagName('a')
		var content=document.getElementsByClassName('content')[0]
		var di=content.getElementsByTagName('div')
		for(var i=0;i<btn.length;i++){
			btn[i].index=i;
			btn[i].onclick=function(){
				for(var k=0;k<btn.length;k++){
					btn[k].className='';
					di[k].className='';
				}
				this.className='active';
				di[this.index].className='box1';
			}

            
		}
		
	</script>
</html>